<template>
    <div class="upload-head-img">
        <el-upload
            accept=".jpg,jpeg,.png"
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="beforeFileUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon">预览</i>
        </el-upload>

        <el-button type="primary" style="margin-left:38px;margin-top:8px;" @click="uploadFileImg">上传头像</el-button>
    </div>
</template>

<script>
    export default {
        name: "uploadHeadImg",
        data() {
            return {
                imageUrl:'',
                uploadFile:null,
                fileSubmitForm:{
                    imgBase64:'',

                }
            };
        },
        methods: {
            beforeFileUpload(file){
                console.log(file.raw);
                var fileRaw = file.raw;
                var fileType = fileRaw.type;
                const isJPG = fileType === 'image/jpeg';
                const isPNG = fileType === 'image/png';
                const isLt2M = fileRaw.size / 1024 / 1024 < 2;

                //如果头像不符合格式要求，报错
                if(!(isPNG||isJPG)){
                    this.$notify.error({
                        title: '头像预览失败',
                        message: '上传头像图片只能是JPG格式或者PNG格式!',
                        position: 'bottom-right'
                    });
                }

                //如果头像尺寸过大，报错
                if (!isLt2M) {
                    this.$notify.error({
                        title: '头像预览失败',
                        message: '上传头像图片大小不能超过2MB!',
                        position: 'bottom-right'
                    });
                }

                //图片格式符合要求且大小符合要求，预览图片,并且填充图片信息到data里用于上传使用
                this.imageUrl = URL.createObjectURL(fileRaw);
                this.file = file;
            },
            uploadFileImg(){
                var file = this.file;
                var self = this;

                self._getBase64(file.raw).then(res => {
                    self.fileSubmitForm.imgBase64 = res;
                    self.$api.post('fileController/uploadHeadImg',self.fileSubmitForm, result => {
                           if(result==="UPLOAD_SUCCESS"){
                               // this.$notify.error({
                               //     title: '头像预览失败',
                               //     message: '上传头像图片大小不能超过2MB!',
                               //     position: 'bottom-right'
                               // });
                               self.$notify({
                                   title: '头像保存成功',
                                   message: '头像已成功保存.',
                                   type: 'success',
                                   position: 'bottom-right'
                               });
                           }
                        },
                        failure=>{

                        });
                });

            },
            _getBase64(file) {
                return new Promise(function(resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        imgResult = reader.result;
                    };
                    reader.onerror = function(error) {
                        reject(error);
                    };
                    reader.onloadend = function() {
                        resolve(imgResult);
                    };
                });
            },
            // getImgBase64(file) {
            //     this._getBase64(file.raw).then(res => {
            //         debugger;
            //         return res;
            //         console.log(res)
            //     });
            // },
        }
    }
</script>

<style scoped>

    .upload-head-img{
        margin-left:calc(50% - 89px);
        margin-top:40px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border-radius:89px;
        border:1px solid #cccccc;
    }
    .avatar {
        width: 178px;
        height: 178px;
        border-radius:89px;
        display: block;
    }
</style>
